<template>
  <div>
    <div
      @click.self="closeMask"
      v-if="pepleishow"
      class="x-people"
      :style="{ height: `${deviceH}px` }"
    >
    <div>
      <div class="ctx-title">
        实有人口</div>
      <span  style="float:right" class="back" @click="closeMask">
                      <img src="../../assets/images/icon/return.png" alt />
                    </span>
    </div>

      <div class="people-ctx" :style="{ 'background-image': `url(${modelBg})` }">
        <div class="top">
          <ul>
            <li>
              <p>人口总数</p>
              <p>{{ peopleTotal }}</p>
            </li>
            <li @click="changestatus({ personType: 1 },'常住人口')" style="cursor: pointer;">
              <p>常住人口</p>
              <p>{{ hujiTotal }}</p>
              <span >{{ hujibaifen }}</span>
            </li>
            <li @click="changestatus({ personType: 2 },'暂住人口')" style="cursor: pointer;">
              <p>暂住人口</p>
              <p>{{ liudongTotal }}</p>
              <span>{{ liudongbaifen }}</span>
            </li>
              <li @click="changestatus({ personType: 6 },'境外人员')" style="cursor: pointer;">
              <p>境外人员</p>
              <p>{{ jiangwaiTotal }}</p>
              <!-- <span>{{ liudongbaifen }}</span> -->
            </li>
          </ul>

          <ol>
            <li @click="changestatus({ sex: 0 },'男性人数')" style="cursor: pointer;">
              <img src="../../assets/images/renkou_top_man.png" alt />
              <div>
                <p>男性人数</p>
                <p>
                  {{ manTotal }}&nbsp;&nbsp;
                  <span>{{ manbili }}</span>
                </p>
              </div>
            </li>
            <li @click="changestatus({ sex: 1 },'女性人数')" style="cursor: pointer;">
              <img src="../../assets/images/renkou_top_woman.png" alt />
              <div>
                <p>女性人数</p>
                <p>
                  {{ womanTotal }}&nbsp;&nbsp;
                  <span>{{ womanbili }}</span>
                </p>
              </div>
            </li>
            <li style="border-right: none;">
              <img src="../../assets/images/renkou_top_bing.png" alt style="width: 67px;" />
              <div>
                <p style="margin-left: 0px;">男女比例</p>
                <p>{{ bili }}</p>
              </div>
            </li>
          </ol>
        </div>
        <div class="middle">
          <div class="middle_one">
            <div id="main" style="width: 713px;height: 300px;"></div>
            <div id="main2">
              <div class="type-title">户籍分布</div>
              <ul v-if="UnitTypeEchartsData.length" class="type-list" style="height:200px;overflow-y:auto">
                <li
                  v-for="item in UnitTypeEchartsData"
                  :key="item.name"
                  class="type-list-rs"
                  @click="changestatus({ provice: item.name },'户籍分布：'  + item.name)"
                  style="cursor: pointer;"
                >
                  <div class="rs-name">
                    <span class="name">{{ item.name }}</span>
                    <span class="number">{{ item.value }}</span>
                  </div>
                  <div class="rs-process" style="cursor: pointer;">
                    <div class="process" :style="{ width: `${(item.value / 10000) * 100}%` }"></div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!--人口年龄结构分析-->
          <div class="middle_two">
            <div id="main3" style="width: 632px;height: 345px;"></div>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom_one">
            <img src="../../assets/images/renkou_jzt.png" alt style="margin-top: 80px;" />
            <div
              :class="'bottom_one_' + index"
              v-for="(item, index) in gaList"
            >
              <p>{{ item.value }}</p>
              <p>{{ item.name }}</p>
            </div>
          </div>
          <div class="bottom_two">
            <div id="main4" style="width: 468px;height: 448px;margin-top: 35px;"></div>
          </div>
          <!--网格人口统计-->
          <div class="bottom_three">
            <ul>
              <li v-for="item in wgList" @click="districtPersonsInfoPageList(item.name)" style="cursor: pointer;">
                <img src="../../assets/images/renkou_quanquan.png" alt />
                <div>
                  <p>{{ item.name }}</p>
                  <p>{{ item.value }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!--详情页-->
    <div
      @click.self="closeMask"
      v-if="!pepleishow"
      class="x-house"
      :style="{ height: `${deviceH}px` }"
    >
      <div
        v-show="isShowCtx == '2'"
        class="house-ctx page2"
        :style="{ 'background-image': `url(${modelBg1})` }"
      >
        <span @click="maskPageHide()" style="float:right" class="back">
          <img src="../../assets/images/icon/return.png" />
        </span>
        <div class="footer-unit" style="margin-top:20px">
          <div class="unit-header">
            <div style="color:#C9FBFE;font-size:30px;">{{clickTitle}}</div>
          </div>

          <div
            style="display:flex;flex-wrap:nowrap;align-items:center;width:calc(100% - 80px);height:36px;white-space:nowrap;padding:0 40px;margin-top:1rem;"
          >
            <div class="header-item" style="margin-right:50px;">
              <input v-model="peopleName" class="input" placeholder="姓名" />
            </div>
            <div class="header-item">
              <input v-model="peopleUserID" class="input" placeholder="身份证号" />
            </div>
            <div style="width:calc(100% - 528px);"></div>
            <div @click="searchEvent()" class="header-btn">搜索</div>
          </div>

          <div class="unit-list">
            <ul class="list-ul">
              <li class="list-li">
                <div class="item-no">序号</div>
                <div class="li-name">姓名</div>
                <div class="li-sex">性别</div>
                <div class="li-age">年龄</div>
                <div class="li-phone">身份证号</div>
                <div class="li-phone">联系电话</div>
                <div class="li-phone">操作</div>
              </li>
              <li
                @click="showPeopleDetail(index, item)"
                v-if="peoples.length >= 0"
                v-for="(item, index) in peoples"
                class="list-li"
              >
                <div class="item-no">{{ index + 1 + pageSize * (pageNum - 1) }}</div>
                <div class="li-name">{{ item.name }}</div>
                <div class="li-sex">{{ item.sex }}</div>
                <div class="li-age">{{ item.age }}</div>
                <div
                  :alt="item.idNum"
                  :title="item.idNum"
                  class="li-phone"
                >{{ new String().hideidCard(item.idNum) }}</div>
                <div :alt="item.phone" :title="item.phone" class="li-phone">{{ item.phone }}</div>
                <div class="li-phone button-color">查看</div>
              </li>
            </ul>
          </div>
          <div v-if="allpage > 0" class="table-footer">
            <x-page
            :currentPage="pageNum"
              @currentChange="currentChange"
              :page-size="5"
              :allpage="allpage"
              :total-num="false"
            />
          </div>
        </div>
      </div>
      <div
        v-if="isShowCtx == '3'"
        class="house-ctx page2"
        :style="{ 'background-image': `url(${modelBg1})` }"

      >
        <div>
          <x-dangan :id="danganid" @changedangan="changedangan"></x-dangan>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import XPie from "@/components/xpie";
import XLine from "@/components/xline";
import XPage from "@/components/xpage";
import XCategory from "@/components/xcategory";
import XDangan from "@/components/xdanganmodel";
import { getPersonPageInfo } from "@/api/peopleApi";
export default {
  name: "xpeoplemodel",
  props: {
    PeopleEchartsData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    code: {
      type: String,
      default: ""
    }
  },
  //computed() {},
  data() {
    return {
      pepleishow: true,
      deviceH: 0,
      peopleTotal: "",
      hujiTotal: "",
      liudongTotal: "",
      bili: "",
      manTotal: "",
      womanTotal: "",
      UnitTypeEchartsData: [],
      modelBg1: require("@/assets/images/modelBg.png"),
      modelBg: require("@/assets/images/renkou_bg.png"),
      option: {},
      gaList: [],
      hujibaifen: "",
      liudongbaifen: "",
      manbili: "",
      womanbili: "",
      wgList: [],
      isShowCtx: 2,
      pageNum: 1,
      pageSize: 10,
      peoples: [],
      alltotal: 0,
      allpage: 0,
      peopleobj: {},
      danganid: "",
      ageBegin: "",
      ageEnd: "",
      educationType: "",
      personOut: "",
      clickTitle: "",
      peopleName: "",
      peopleUserID: "",
      buildingIds: "",
      searchNum: "",
      jiangwaiTotal:0
    };
  },
  components: {
    XPie,
    XLine,
    XCategory,
    XPage,
    XDangan
  },
  beforeMount() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.deviceH = h;
  },
  methods: {
    async showPeopleDetail(index, item) {
      console.log(item.idNum);
      this.isShowCtx = 3;
      this.danganid = item.idNum;

    },
    async showPeopleList(obj) {
      // console.log(index, item);
      // let data = {
      //   idNum: this.id
      // };

      var _this = this;
      var data = Object.assign(
         this.peopleobj,{
          placeId: this.code,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }

      );
      console.log(this.peopleobj)
      if (_this.peopleName != "") {
        data.name = _this.peopleName;
      }
      if (_this.peopleUserID != "") {
        data.idNum = _this.peopleUserID;
      }
      console.log("=-=-" + JSON.stringify(data));
      if(this.peopleobj.personType==6){
        this.peoples = [{name:'刘行云',sex:'男',phone:'15951505496',idNum:'H10423204'},{name:'OHJUNGSUK',sex:'男',phone:'18651013280',idNum:'M79822643'},{name:'陈维龙',sex:'男',phone:'15850594815',idNum:'E6018147L'}];
        this.alltotal = 3;
        this.allpage = Math.ceil(this.alltotal / this.pageSize);

      }else{
        const res = await getPersonPageInfo(data);
         console.log("**********");
        console.log(JSON.stringify(res));
        this.peoples = res.list;
        this.alltotal = res.total;
        this.allpage = Math.ceil(this.alltotal / this.pageSize);
      }


    },
    changedangan() {
      this.isShowCtx = 2;
    },
    changestatus(obj, title) {
      console.log("切换");
      console.log(title);
      this.searchNum = 0;
      this.clickTitle = title;
      this.pepleishow = !this.pepleishow;
      this.peopleobj = {};
      this.peopleobj = obj;
      this.showPeopleList(obj);
      console.log("++" + JSON.stringify(obj));
    },
    currentChange(n) {
      console.log("分页");
      this.pageNum = n;
      this.showPeopleList();
    },
    //从详情页返回人口页面
    maskPageHide() {
      this.pepleishow = true;
      this.$nextTick(function() {
        this.getsqld();
        this.getageqs();
        this.getwhcd();
      });
      this.pageNum = 1;
      this.peopleName = "";
      this.peopleUserID = "";
    },
    //点击图表显示详情
    async chartsShowMask(num) {
      this.pepleishow = !this.pepleishow;
      var data = {};
      this.searchNum = num;
      data.placeId = this.code;
      data.pageNum = this.pageNum;
      data.pageSize = this.pageSize;
      if (num == 1) {
        data.personOut = this.personOut;
      } else if (num == 2) {
        data.ageBegin = this.ageBegin;
        data.ageEnd = this.ageEnd;
      } else if (num == 3) {
        data.educationType = this.educationType;
      }
      console.log("=-=-" + JSON.stringify(data));
      this.peopleobj=data
      this.showPeopleList()
      // const res = await getPersonPageInfo(data);
      // console.log("**********");
      // console.log(JSON.stringify(res));
      // this.peoples = res.list;
      // this.alltotal = res.total;
      // this.allpage = Math.ceil(this.alltotal / this.pageSize);
    },
    //社区人员流动趋势图
    getsqld() {
      var _this = this;
      let data = [];
      let lrData = [];
      let lcData = [];
      console.log("--" + this.PeopleEchartsData[8].itmes[0].itmes[0].value);
      for (let i in this.PeopleEchartsData[8].itmes) {
        data.push(this.PeopleEchartsData[8].itmes[i].resultname);
        lrData.push(this.PeopleEchartsData[8].itmes[i].itmes[0].value);
        lcData.push(this.PeopleEchartsData[8].itmes[i].itmes[1].value);
      }
      console.log("===1" + data);
      console.log("---2" + lrData);
      console.log("===3" + lcData);
      let echarts = document.getElementById("main");
      let myChart = this.$echarts.init(echarts);
      //myChart.getZr().on('click', param => {
      //  console.log(param)
      //})
      myChart.on("legendselectchanged", param => {
        console.log(param.name);
        var name = "社区流动趋势分析：" + param.name;
        _this.clickTitle = name;
        if (name == "流入人口") {
          _this.personOut = 0;
        } else if (name == "流出人口") {
          _this.personOut = 1;
        }
        _this.chartsShowMask(1);
      });
      myChart.setOption({
        title: {
          text: "近30天社区人员流动趋势图",
          textStyle: {
            color: "#56FFFA"
          },
          top: "15%",
          left: "10%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ["#47e3ff", "#f7b500"],
        legend: {
          data: ["流入人口", "流出人口"],
          textStyle: {
            color: "#fff"
          },
          top: "18%",
          right: "10%"
          //selectedMode:false,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data,
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        },
        grid: {
          top: "30%",
          right:"10%"
        },
        series: [
          {
            name: "流入人口",
            type: "line",
            data: lrData,
            symbol: "none", //隐藏点
            smooth: true,
            areaStyle: {
              color: "#17495d"
            },
            lineStyle: {
              color: "#47e3ff"
            }
          },
          {
            name: "流出人口",
            type: "line",
            data: lcData,
            symbol: "none", //隐藏点
            smooth: true,
            areaStyle: {
              color: "#526442"
            },
            lineStyle: {
              color: "#f7b500"
            }
          }
        ]
      });

      console.log("==finish");
    },
    //人口车龄结构分析
    getageqs() {
      var _this = this;
      let data = [];
      let manData = [];
      let manData2=[]
      let womanData = [];
      let womanData2 = [];
      for (let i in this.PeopleEchartsData[4].itmes) {
        data.push(this.PeopleEchartsData[4].itmes[i].resultname);
        manData.push(this.PeopleEchartsData[4].itmes[i].itmes[0].value);
        womanData.push(this.PeopleEchartsData[4].itmes[i].itmes[1].value);
      }
      for (let i in manData) {
        manData2.push(-manData[i]);
      }
      console.log(womanData2);
      let echarts = document.getElementById("main3");
      let myChart = this.$echarts.init(echarts);
      myChart.on("click", function(param) {
        console.log(param);
        let name = param.name;
        _this.clickTitle = "人口年龄结构分析：" + name;
        console.log(param.name);
        switch (name) {
          case "7岁以下":
            _this.ageBegin = 0;
            _this.ageEnd = 7;
            _this.chartsShowMask(2);
            break;
          case "18岁以下":
            _this.ageBegin = 0;
            _this.ageEnd = 18;
            _this.chartsShowMask(2);
            break;
          case "18-30岁":
            _this.ageBegin = 18;
            _this.ageEnd = 30;
            _this.chartsShowMask(2);
            break;
          case "30-40岁":
            _this.ageBegin = 30;
            _this.ageEnd = 40;
            _this.chartsShowMask(2);
            break;
          case "40-50岁":
            _this.ageBegin = 40;
            _this.ageEnd = 50;
            _this.chartsShowMask(2);
            break;
          case "50-60岁":
            _this.ageBegin = 50;
            _this.ageEnd = 60;
            _this.chartsShowMask(2);
            break;
          case "60-70岁":
            _this.ageBegin = 60;
            _this.ageEnd = 70;
            _this.chartsShowMask(2);
            break;
          case "70以上":
            _this.ageBegin = 70;
            _this.ageEnd = 150;
            _this.chartsShowMask(2);
            break;
        }
      });
      myChart.setOption({
        color: ["#56FFFA", "#47A0FF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: params => {
            if (!params.length) return "";
            let s = params[0].axisValueLabel + "<br/>";
            for (const iterator of params) {
              // 如果是负数则反转
              let d = iterator.data < 0 ? -iterator.data : iterator.data;
              s += iterator.marker + iterator.seriesName + "：" + d + "<br/>";
            }
            return s;
          }
        },
        legend: {
          data: ["男", "女"],
          top: "15%",
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          top: "24%",
          containLabel: true
        },
        xAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: function(value) {
                return Math.abs(value);
              }
            },
            axisLine: {
              lineStyle: {
                color: "#e5e5e5"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#6c6c6c"],
                width: 1,
                type: "solid"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false
            },
            data: data.reverse(),
            axisLine: {
              lineStyle: {
                color: "#e5e5e5"
              }
            }
            // splitLine: {
            //   show: true,
            //   lineStyle: {
            //     color: ['#e5e5e5'],
            //     width: 1,
            //     type: 'solid'
            //   },
            // }
          }
        ],
        series: [

          {
            name: "女",
            type: "bar",
            stack: "总量",
            data: womanData.reverse()
          },
           {
            name: "男",
            type: "bar",
            stack: "总量",
            data: manData2.reverse()
          }
        ]
      });
    },
    //文化程度分析
    getwhcd() {
      var _this = this;
      let ind = [];
      let value = [];
      console.log(111,this.PeopleEchartsData[5].itmes)
      for (let i in this.PeopleEchartsData[5].itmes) {
        ind.push({
          name: this.PeopleEchartsData[5].itmes[i].name,
          max: 10000
        });
        value.push(this.PeopleEchartsData[5].itmes[i].value);
      }
      ind[0].axisLabel = {
        show: true,
        fontSize: 12,
        color: "#64C4CC",
        showMaxLabel: true, //不显示最大值，即外圈不显示数字30
        showMinLabel: true //显示最小数字，即中心点显示0
      };
      let echarts = document.getElementById("main4");
      let myChart = this.$echarts.init(echarts);
      myChart.on("click", function(param) {
        console.log(param);
        let name = param.name;
        _this.clickTitle = "文化程度分析图：" + name;
        switch (name) {
          case "大专":
            name = 5;
            break;
          case "其他":
            name = 9;
            break;
          case "小学":
            name = 8;
            break;
          case "初中":
            name = 7;
            break;
          case "高中":
            name = 6;
            break;
          case "本科":
            name = 4;
            break;
          case "硕士":
            name = 3;
            break;
        }
        _this.educationType = name;
        _this.chartsShowMask(3);
      });
      myChart.setOption({
        legend: {
          width: 20,
          orient: "vertical",
          height: 8,
          top: "70%",
          left: "10%",
          icon: "rect",
          itemWidth: 10, // 设置宽度
          itemHeight: 8, // 设置高度
          itemGap: 10, // 设置间距
          textStyle: {
            color: "#fff",
            fontSize: 14
          }
        },
        color: [
          "#209CFF",
          "#68E0CF",
          "#E16757",
          "#DEA55C",
          "#45D08C",
          "#8CB1FF",
          "#B095FF"
        ],
        series: [
          {
            type: "pie",
            electedOffset: 0,
            hoverAnimation: false,
            radius: "45%",
            center: ["50%", "35%"],
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(0,0,0,0.8)"
            },
            avoidLabelOverlap: true,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{b}: {c} ({d}%)"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: this.PeopleEchartsData[5].itmes
          }
        ]
      });
    },

    getrenyuanxz() {
      let data = [];
      let value = [];
      for (let i in this.PeopleEchartsData[6].itmes) {
        data.push(this.PeopleEchartsData[6].itmes[i].name);
        value.push(this.PeopleEchartsData[6].itmes[i].value);
      }
    },
    // pl(num1,num2){
    //   return (Math.round(num1/num2*10000)/100.00 + '%')
    // },

    //获取网络人口统计数据
    async districtPersonsInfoPageList(name) {
      var _this = this;
      this.searchNum = 4;
      this.pepleishow = !this.pepleishow;
      this.clickTitle = "网格人口统计：" + name;
      var data = {};
      data.placeId = this.code;
      data.pageNum = this.pageNum;
      data.pageSize = this.pageSize;
      console.log(name);
      switch (name) {
        case "第四网格":
          _this.buildingIds = "22,29,19";
          break;
        case "第五网格":
          _this.buildingIds = "9,15,17";
          break;
        case "第六网格":
          _this.buildingIds = "27,12,6";
          break;
        case "第七网格":
          _this.buildingIds = "28,23,20";
          break;
        case "第八网格":
          _this.buildingIds = "10,7,23";
          break;
        case "第九网格":
          _this.buildingIds = "24,21,26";
          break;
        case "第十网格":
          _this.buildingIds = "8,18,43";
          break;
      }
      data.buildingIds = _this.buildingIds;
      this.peopleobj=data
      this.showPeopleList()
      // console.log("=-=-" + JSON.stringify(data));
      // const res = await getPersonPageInfo(data);
      // console.log("**********");
      // console.log(JSON.stringify(res));
      // this.peoples = res.list;
      // this.alltotal = res.total;
      // this.allpage = Math.ceil(this.alltotal / this.pageSize);
    },
    //点击搜索
    async searchEvent() {
      var _this = this;
      console.log("%%%%%%%%" + _this.searchNum);
      _this.pageNum = 1;
      if (_this.searchNum == 0) {
        var data = Object.assign(
          {
            placeId: this.code,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          },
          this.peopleobj
        );
        if (_this.peopleName != "") {
          data.name = _this.peopleName;
        }
        if (_this.peopleUserID != "") {
          data.idNum = _this.peopleUserID;
        }
        console.log("=-=-" + JSON.stringify(data));
        const res = await getPersonPageInfo(data);
        console.log("**********");
        console.log(JSON.stringify(res));
        this.peoples = res.list;
        this.alltotal = res.total;
        this.allpage = Math.ceil(this.alltotal / this.pageSize);
      } else if (
        _this.searchNum == 1 ||
        _this.searchNum == 2 ||
        _this.searchNum == 3
      ) {
        var data = {};
        data.placeId = this.code;
        data.pageNum = this.pageNum;
        data.pageSize = this.pageSize;
        if (_this.searchNum == 1) {
          data.personOut = this.personOut;
        } else if (_this.searchNum == 2) {
          data.ageBegin = this.ageBegin;
          data.ageEnd = this.ageEnd;
        } else if (_this.searchNum == 3) {
          data.educationType = this.educationType;
        }
        if (_this.peopleName != "") {
          data.name = _this.peopleName;
        }
        if (_this.peopleUserID != "") {
          data.idNum = _this.peopleUserID;
        }
        console.log("=-=-" + JSON.stringify(data));
        const res = await getPersonPageInfo(data);
        console.log("**********");
        console.log(JSON.stringify(res));
        this.peoples = res.list;
        this.alltotal = res.total;
        this.allpage = Math.ceil(this.alltotal / this.pageSize);
      } else if (_this.searchNum == 4) {
        var data = {};
        data.placeId = this.code;
        data.pageNum = this.pageNum;
        data.pageSize = this.pageSize;
        console.log(name);
        switch (name) {
          case "第四网格":
            _this.buildingIds = "22,29,19";
            break;
          case "第五网格":
            _this.buildingIds = "9,15,17";
            break;
          case "第六网格":
            _this.buildingIds = "27,10,7";
            break;
          case "第七网格":
            _this.buildingIds = "23,28,12";
            break;
          case "第八网格":
            _this.buildingIds = "6,20,11";
            break;
          case "第九网格":
            _this.buildingIds = "24,21,26";
            break;
          case "第十网格":
            _this.buildingIds = "8,18,43";
            break;
        }
        data.buildingIds = _this.buildingIds;
        if (_this.peopleName != "") {
          data.name = _this.peopleName;
        }
        if (_this.peopleUserID != "") {
          data.idNum = _this.peopleUserID;
        }
        console.log("=-=-" + JSON.stringify(data));
        const res = await getPersonPageInfo(data);
        console.log("**********");
        console.log(JSON.stringify(res));
        this.peoples = res.list;
        this.alltotal = res.total;
        this.allpage = Math.ceil(this.alltotal / this.pageSize);
      }
    },

    closeMask() {
      this.$emit("closeMask");
    }
  },
  mounted() {
    console.log(this.PeopleEchartsData);
    this.peopleTotal = this.PeopleEchartsData[0].itmes;
    this.hujiTotal = this.PeopleEchartsData[1].itmes[0].value;
    this.liudongTotal = this.PeopleEchartsData[1].itmes[1].value;
    this.jiangwaiTotal = this.PeopleEchartsData[1].itmes[2]?this.PeopleEchartsData[1].itmes[2].value:0;
    this.hujibaifen =
      Number(
        (this.PeopleEchartsData[1].itmes[0].value /
          this.PeopleEchartsData[0].itmes) *
          100
      ).toFixed(0) + "%";
    this.liudongbaifen =
      Number(
        (this.PeopleEchartsData[1].itmes[1].value /
          this.PeopleEchartsData[0].itmes) *
          100
      ).toFixed(0) + "%";

    this.manTotal = this.PeopleEchartsData[2].itmes[0].value;
    this.womanTotal = this.PeopleEchartsData[2].itmes[1].value;
    this.manbili =
      Number(
        (this.PeopleEchartsData[2].itmes[0].value /
          (this.PeopleEchartsData[2].itmes[1].value +
            this.PeopleEchartsData[2].itmes[0].value)) *
          100
      ).toFixed(0) + "%";
    this.womanbili =
      Number(
        (this.PeopleEchartsData[2].itmes[1].value /
          (this.PeopleEchartsData[2].itmes[1].value +
            this.PeopleEchartsData[2].itmes[0].value)) *
          100
      ).toFixed(0) + "%";
    this.bili =
      Number(
        this.PeopleEchartsData[2].itmes[0].value /
          this.PeopleEchartsData[2].itmes[1].value
      ).toFixed(2) +
      ":" +
      "1";
    this.UnitTypeEchartsData = this.PeopleEchartsData[3].itmes;
    this.gaList = [
      { name: "社区矫正人员", value: "1" },
      { name: "残疾军人", value: "2" },
      { name: "低保人员", value: "2" },
      { name: "80岁及以上老人", value: "30" },
      { name: "残疾人", value: "53" }
    ];

    this.wgList = [
      {
        name: "第四网格",
        value: this.PeopleEchartsData[6].itmes[0]
      },
      {
        name: "第五网格",
        value: this.PeopleEchartsData[6].itmes[1]
      },
      {
        name: "第六网格",
        value: this.PeopleEchartsData[6].itmes[2]
      },
      {
        name: "第七网格",
        value: this.PeopleEchartsData[6].itmes[3]
      },
      {
        name: "第八网格",
        value: this.PeopleEchartsData[6].itmes[4]
      },
      {
        name: "第九网格",
        value: this.PeopleEchartsData[6].itmes[5]
      },
      {
        name: "第十网格",
        value: this.PeopleEchartsData[6].itmes[6]
      }
    ];
this.getwhcd();
    this.getsqld();
    this.getageqs();
    
    this.getrenyuanxz();
  }
};
</script>
<style lang="less" scoped>
.x-people {
  width: 100%;
  height: calc(100vh);
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  cursor: default;

  .ctx-title {
    width: 100%;
    padding-top: 10px;
    box-sizing: border-box;
    font-family: PingFangSC-Medium;
    font-size: 42px;
    color: #c9fbfe;
    letter-spacing: 4.8px;
    text-align: center;
    box-sizing: border-box;
  }

  .people-ctx {
    position: absolute;
    top: 52%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1825px;
    height: 914px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;

    .top {
      overflow: hidden;

      ul {
        list-style: none;
        overflow: hidden;
        float: left;
        margin-left: -38px;

        li {
          background: url(../../assets/images/renkou_top_kuang.png) no-repeat;
          background-size:100% 100%;
          width: 222px;
          height: 120px;
          float: left;
          margin-right: 15px;
          text-align: left;
          text-indent: 20px;
          position: relative;

          p:nth-child(1) {
            color: #69f1f7;
            font-size: 18px;
          }

          p:nth-child(2) {
            color: #fff;
            font-size: 26px;
            margin-top: 0px;
          }
          li:nth-child(3) {
             color: #fff;
            font-size: 26px;
            margin-top: 0px;
          }

          li:nth-child(4) {
            margin-right: 0px;
          }

          span {
            position: absolute;
            color: #fff;
            font-size: 26px;
            top: 56px;
            left: 142px;
          }
        }
      }

      ol {
        list-style: none;
        overflow: hidden;
        float: left;

        li {
          float: left;
          width: 235px;
          height: 100px;
          overflow: hidden;
          border-right: 4px solid #69f1f7;

          img {
            float: left;
            margin-top: 12px;
            margin-left: 20px;
          }

          div {
            float: left;
            margin-left: 22px;

            p:nth-child(1) {
              font-size: 22px;
              color: #69f1f7;
              margin-left: -25px;
            }

            p:nth-child(2) {
              font-size: 18px;
              color: #69f1f7;
              margin-left: 2px;
            }
          }
        }
      }
    }

    .middle {
      overflow: hidden;
      width: 1825px;
      margin-left: -20px;

      .middle_one {
        background: url(../../assets/images/renkou_middle_1.png) no-repeat;
        width: 1145px;
        height: 296px;
        float: left;
        overflow: hidden;

        #main {
          float: left;
        }

        #main2 {
          width: 320px;
          height: 235px;
          float: right;
          margin-top: 49px;
          margin-right: 50px;

          .type-title {
            color: #69d3da;
            font-size: 18px;
            font-weight: bold;
            text-align: left;
          }

          .type-list {
            width: 100%;
            padding: 0;
            margin-top: 9px;
            list-style: none;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            box-sizing: border-box;

            .type-list-rs {
              width: 100%;
              list-style: none;
              padding-bottom: 20px;

              .rs-name {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #e5e5e5;
                margin-bottom: 5px;
                cursor: pointer;
                .name {
                  flex: 1;
                  text-align: left;
                }

                .number {
                  flex: 1;
                  text-align: right;
                }
              }

              .rs-process {
                width: 100%;
                height: 6px;
                border-radius: 4px;
                background: #333333;


                .process {
                  transition: width 0.3s ease-in-out;
                  height: 100%;
                  border-radius: 4px;
                  cursor: pointer;
                  background-image: linear-gradient(
                    270deg,
                    #68e0cf 0%,
                    #209cff 100%
                  );
                }
              }
            }
          }
        }
      }

      .middle_two {
        background: url(../../assets/images/renkou_middle_2.png) no-repeat;
        width: 633px;
        height: 296px;
        float: left;
        margin-left: 20px;
      }
    }

    .bottom {
      overflow: hidden;
      width: 1825px;
      margin-left: -39px;

      .bottom_one {
        background: url(../../assets/images/renkou_bottom_1.png) no-repeat;
        width: 696px;
        height: 448px;
        float: left;
        margin-left: 20px;
        font-size: 14px;

        .bottom_one_0 {
          position: absolute;
          left: 156px;
          bottom: 302px;
          z-index: 1000;
          color: #fff;
          p:nth-child(1){
            font-size: 22px;
          }
        }

        .bottom_one_1 {
          position: absolute;
          left: 504px;
          bottom: 256px;
          z-index: 1000;
          color: #fff;
          p:nth-child(1){
            font-size: 22px;
          }
        }

        .bottom_one_2 {
          position: absolute;
          left: 99px;
          bottom: 194px;
          z-index: 1000;
          color: #fff;
          p:nth-child(1){
            font-size: 22px;
          }
        }

        .bottom_one_3 {
          position: absolute;
          left: 519px;
          bottom: 148px;
          z-index: 1000;
          color: #fff;
          p:nth-child(1){
            font-size: 22px;
          }
        }
        .bottom_one_4 {
          position: absolute;
          left: 59px;
          bottom: 90px;
          z-index: 1000;
          color: #fff;
          p:nth-child(1){
            font-size: 22px;
          }
        }
      }

      .bottom_two {
        background: url(../../assets/images/renkou_bottom_2.png) no-repeat;
        width: 468px;
        height: 448px;
        float: left;
        margin-left: 2px;
      }

      .bottom_three {
        background: url(../../assets/images/renkou_bottom_3.png) no-repeat;
        width: 634px;
        height: 448px;
        float: left;
        margin-left: 0px;

        ul {
          overflow: hidden;
          margin-top: 100px;
          list-style: none;

          li {
            float: left;
            position: relative;
            margin-right: 26px;
            margin-bottom: 30px;

            div {
              position: absolute;
              z-index: 999;
              top: 16px;
              left: 38px;
              text-align: center;
              width: 46px;

              p {
                color: #fff;
              }

              p:nth-child(1) {
                font-size: 16px;
              }

              p:nth-child(2) {
                font-size: 16px;
                margin-top: -10px;
              }
            }
          }
        }
      }
    }
  }
}
.x-house {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;

  .text-left.page2 {
    text-align: left;
  }

  .page2 {
    .unit-list {
      .list-li:nth-child(even) {
        background-color: #06121d;
      }
    }

    .back {
      float: right;
      position: absolute;
      right: 60px;
      width: 0px;
      top: 30px;
      cursor: pointer;
      img {
        width: 30px;
        height: 30px;
      }
    }

    .tabbar {
      padding: 0;
      margin: 0;
      list-style: none;
      text-align: left;
      text-align: left;
      margin-top: 20px;

      .tabbarContent {
        & > li,
        & > ul {
          padding: 0;
          margin: 0;
          list-style: none;
          color: #fff;
        }

        li {
          width: 33%;
          display: inline-block;
          padding-top: 10px;
          padding-bottom: 10px;

          span {
            width: 40%;
            display: inline-block;
          }
        }
      }

      & > li {
        display: inline-block;
        padding: 5px;
        border-radius: 4px;
        background: #0f0f2b;
        font-size: 16px;
        color: #fff;
      }

      .list-li:nth-child(even) {
        background-color: #06121d;
      }
    }

    .tabbar .active {
      background: #3f8aff;
      color: #fff;
    }

    .name {
      width: 100%;
      text-align: left;
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: #69d3da;
      letter-spacing: 0;
      overflow: hidden;
      white-space: nowrap;
      word-break: normal;
      text-overflow: ellipsis;
      margin-top: 20px;

      & > span {
        line-height: 2;
      }
    }

    .choose {
      float: right;
      padding: 0;
      margin: 0;
      position: relative;
      top: 0;
    }

    .choose ul,
    .choose li {
      list-style: none;
      display: inline-block;
    }

    .choose li {
      padding: 8px;
      border-radius: 4px;
      background: #0f0f2b;
      cursor: pointer;
    }

    .choose .active {
      background: #3f8aff;
      color: #fff;
    }

    .car-li {
      flex-wrap: wrap;

      .carDetail {
        display: flex;
        align-items: center;
        flex-grow: 1;
        width: 100% !important;

        & > div {
          width: 20%;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      & > div {
        width: 20% !important;
      }
    }

    .list-li {
      cursor: pointer;
      width: 100%;
      height: 50px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffffff;
      line-height: 36px;

      & > div {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 22px;
        width: 100%;
      }

      & > .button-color {
        color: #3f8aff;
      }
    }
  }

  .house-ctx::-webkit-scrollbar {
    width: 0px;
    height: 16px;
    background-color: #ccc;
  }

  .house-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    overflow-y: auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;

    .ctx-title {
      width: 100%;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
    }

    .ctx-info {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 28px;

      .info-item {
        flex: 1;
        height: 180px;

        .item-rs {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .rs-content {
            width: 50%;
            height: 100%;

            .content-name {
              width: 100%;
              font-family: PingFangSC-Medium;
              font-size: 18px;
              color: #69d3da;
              letter-spacing: 0;
              text-align: left;

              .iconfont {
                font-size: 22px;
                margin-right: 8px;
              }
            }

            .content-number {
              font-family: Silom;
              font-size: 40px;
              margin-top: 18px;
              text-align: left;
              color: #d0b01c;
              letter-spacing: 2.22px;
              line-height: 40px;

              .unit {
                font-family: PingFangSC-Medium;
                font-size: 18px;
                color: #69d3da;
                letter-spacing: 0;
              }
            }
          }
        }

        .item-name {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          text-align: left;

          .iconfont {
            font-size: 22px;
            margin-right: 8px;
          }
        }

        .item-number {
          margin-top: 20px;
          font-family: Silom;
          font-size: 40px;
          color: #d0b01c;
          letter-spacing: 2.22px;
          text-align: left;
        }

        .item-pie {
          width: 100%;
          height: 140px;
          margin-top: 10px;
          padding: 5px 0px;
          box-sizing: border-box;

          .pie-canvas {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .ctx-footer {
      width: 100%;
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .footer-floor::-webkit-scrollbar {
        width: 0px;
        height: 16px;
        background-color: #ccc;
      }

      .footer-floor {
        flex: 1;
        height: 445px;
        overflow-y: auto;

        .floor-name {
          width: 100%;
          text-align: left;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          overflow: hidden;
          white-space: nowrap;
          word-break: normal;
          text-overflow: ellipsis;
        }

        .floor-list {
          width: 100%;
          height: clac(100% - 25px);
          overflow-y: auto;
          margin-top: 20px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .list-name {
            width: 55px;
            text-align: left;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #e9e9e9;
            min-width: 55px;
          }

          .kongzhi {
            background-color: #474747;
          }

          .qunzu {
            background-color: #ca504b;
          }

          .zizhu {
            background-color: #336298;
          }

          .chuzu {
            background-color: #c1812d;
          }

          .list-rs {
            //width: calc(100% - 55px);
            cursor: pointer;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            margin: 10px;
            margin-top: 0;
            margin-bottom: 0;

            .rs-item {
              width: 60px;
              height: 25px;
              text-align: center;
              line-height: 25px;
              font-family: PingFangSC-Regular;
              font-size: 16px;
              color: #e9e9e9;
              text-align: center;
              cursor: pointer;

              &.item-empty {
                background: #474747;
              }

              &.item-self {
                background: #21629c;
              }

              &.item-rent {
                background: #cc7f01;
              }

              &.item-other {
                background: #da4545;
              }
            }
          }
        }
      }

      .footer-unit::-webkit-scrollbar {
        width: 0px;
        height: 16px;
        background-color: #ccc;
      }

      .footer-unit {
        flex: 1;
        height: 450px;
        overflow-y: auto;

        .unit-header {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .header-btn {
            width: 60px;
            height: 32px;
            background: #102c45;
            margin-right: 3px;
            line-height: 32px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;

            &:first-child {
              border-top-left-radius: 4px;
              border-bottom-left-radius: 4px;
            }

            &:last-child {
              border-top-right-radius: 4px;
              border-bottom-right-radius: 4px;
              margin-right: 0;
            }

            &.active {
              background: #209cff;
            }
          }
        }

        .unit-list {
          width: 100%;
          height: clac(100% - 25px);

          margin-top: 30px;

          .list-title {
            font-family: PingFangSC-Semibold;
            font-size: 16px;
            color: #ffffff;
            text-align: center;
            line-height: 22px;
          }

          .list-ul {
            width: 90%;
            height: clac(100% - 25px);
            margin-top: 15px;
            overflow-y: auto;
            list-style: none;

            .list-li:nth-child(even) {
              background-color: #06121d;
            }

            .list-li {
              cursor: pointer;
              width: 100%;
              height: 36px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #ffffff;
              line-height: 36px;

              .item-no {
                width: 30%;

                box-sizing: border-box;
              }

              .li-name {
                width: 50%;

                box-sizing: border-box;
              }

              .li-sex {
                width: 40%;

                box-sizing: border-box;
              }

              .li-age {
                width: 40%;

                box-sizing: border-box;
              }

              .li-phone {
                box-sizing: border-box;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}
.table-footer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
}

.input {
  font-size: 14px;
  color: #fff;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
}

.header-item {
  width: 186px;
  height: 100%;
  border: none;
  outline: none;
  background: #06121d;
  border: 1px solid rgba(62, 178, 215, 0);
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  padding: 0 14px;
  box-sizing: border-box;
}

.header-btn {
  width: 66px;
  height: 100%;
  background: #72edf5;
  border-radius: 4px;
  text-align: center;
  line-height: 36px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #000000;
  cursor: pointer;
}

	body::-webkit-scrollbar {
		display: none;
	}

	.type-list::-webkit-scrollbar {
		display: none;
  }

 .back {
      float: right;
      position: absolute;
      right: 60px;
      width: 0px;
      top: 0px;
      cursor: pointer;

      img {
        width: 30px;
        height: 30px;
      }
    }
</style>
